<template>
    <div id="service_list">
    <el-row>
        <!-- 左边导航栏 -->
        <el-col :span="4">
            <div class="left_menu">
                <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                @select="handelSelect">
                    <el-menu-item index="0">
                        <!-- <i class="el-icon-menu"></i> -->
                        <i class="iconfont">&#xe672;</i>
                        <span slot="title">全部</span>
                    </el-menu-item>
                    <el-menu-item :index="(item.id).toString()" v-for="item in repairList" :key="item.id">
                        <span slot="title">{{ item.category_name }}</span>
                    </el-menu-item>

                </el-menu>
            </div>
        </el-col>
    <!-- 右边主体 -->
        <el-col :span="20">
            <div class="right_main">
                <ShowList v-for="item in showListData" :key="item.id " :list="item"></ShowList>
            </div>
        </el-col>
    </el-row>
    </div>
</template>

<script>
import ShowList from '@/components/userComponents/ShowList.vue'
import '@/assets/font/iconfont.css'
import { getCategoryListService, getCategoryService, getCategoryListServiceforId } from '@/api/repair'
export default {
  data () {
    return {
      showListData: [],
      repairList: []
    }
  },
  async created () {
    await this.getCategoryList()
    await this.getCategory()
  },
  methods: {
    async select (id) {
      const res = await getCategoryListServiceforId(id)
      this.showListData = res.data
    },
    async handelSelect (index) {
      if (index === '0') {
        return await this.getCategoryList()
      }
      // TODO: 调用接口 根据 维修分类ID 获取维修列表
      const id = Number(index)
      const res = await getCategoryListServiceforId(id)
      this.showListData = res.data
    },
    async getCategoryList () {
      const res = await getCategoryListService()
      this.showListData = res.data
    },
    async getCategory () {
      const res = await getCategoryService()
      this.repairList = res.data
    }
  },
  components: {
    ShowList
  }
}
</script>

<style lang="less" scoped>
#service_list{
    margin: 30px auto;
    // padding: 0 100px;
    min-height: 500px;
    background-color: #fff;

    .left_menu{

        .iconfont{
            margin-right: 10px;
                // transform: translate(0 10px);
        }
    }
    .right_main{
        margin-left: 20px;
        padding: 30px;
        display: flex;
        // justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
}

</style>
